<template>
  <div>
    <h1>我的项目</h1>
    <el-tree
        :data="tree_data"
        node-key="id">
      <template #default="{ node ,data}">
        <el-row :gutter="20" v-if="node.isLeaf" type="flex" style="align-items: center">

          <el-col :span="6">
            {{ node.label }}
          </el-col>

          <el-divider direction="vertical"/>
          <el-col :span="4">
            当前状态:
            <el-tag v-if="data.status===0"> 申请中</el-tag>
            <el-tag v-if="data.status===1" type="warning"> 已查验</el-tag>
            <el-tag v-if="data.status===2" type="success"> 进行中</el-tag>
            <el-tag v-if="data.status===3" type="danger"> 已失败</el-tag>
            <el-tag v-if="data.status===4" type="info"> 已终止</el-tag>
          </el-col>

          <el-col :span="10" :offset="1">
            <el-divider direction="vertical"/>
            <el-button type="primary" @click="toApplyResource(data)">资源申请</el-button>
            <el-button type="primary" @click="toEnterLab(data)">进入实验</el-button>
            <el-button type="primary" @click="toReturnResource(data)">资源归还</el-button>
            <el-button type="primary" @click="toUpdateData(data)">实验数据</el-button>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-else>
          <el-col>
            {{ node.label }}
          </el-col>
        </el-row>
      </template>
    </el-tree>
  </div>
</template>

<script>
export default {
  name: "MyProject",
  data() {
    return {
      tree_data: [
        {
          id: 1,
          label: '项目:🐖DNA检测',
          children: [{
            id: 4,
            label: '实验: 分离纯化DNA',
            children: [{
              id: 9,
              label: '步骤1',
              children: [
                {
                  id: 9,
                  status: 0,
                  label: '切胶纯化PCR模板'
                },
                {
                  id: 9,
                  status: 1,
                  label: '模板存储在超重水'
                }
              ]
            }, {
              id: 9,
              label: '步骤2',
              children: [
                {
                  id: 9,
                  status: 2,
                  label: '紫外光分度计定量'
                },
                {
                  id: 9,
                  status: 3,
                  label: '琼脂凝胶检测质量'
                }
              ]
            }]
          }, {
            id: 4,
            label: '实验: DNA序列检测',
            children: [{
              id: 9,
              label: '步骤1',
              children: [
                {
                  id: 9,
                  status: 2,
                  label: '去除ddNTP及盐分'
                },
                {
                  id: 9,
                  status: 4,
                  label: '96离心机乙醇沉淀'
                }
              ]
            }, {
              id: 9,
              label: '步骤1',
              children: [
                {
                  id: 9,
                  status: 3,
                  label: '毛细管电泳分离'
                },
                {
                  id: 9,
                  status: 1,
                  label: '激光器诱导识别'
                }]
            }]
          }]
        },
        {
          id: 1,
          label: '项目:😅差不多得了',
          children: [{
            id: 4,
            label: '实验: 打开贴吧',
            children: [{
              id: 9,
              label: '步骤1',
              children: [
                {
                  id: 9,
                  status: 0,
                  label: '切胶纯化PCR模板'
                },
                {
                  id: 9,
                  status: 1,
                  label: '模板存储在超重水'
                }
              ]
            }, {
              id: 9,
              label: '步骤2',
              children: [
                {
                  id: 9,
                  status: 2,
                  label: '紫外光分度计定量'
                },
                {
                  id: 9,
                  status: 3,
                  label: '琼脂凝胶检测质量'
                }
              ]
            }]
          }, {
            id: 4,
            label: '实验: 关闭贴吧',
            children: [{
              id: 9,
              label: '步骤1',
              children: [
                {
                  id: 9,
                  status: 2,
                  label: '去除ddNTP及盐分'
                },
                {
                  id: 9,
                  status: 4,
                  label: '96离心机乙醇沉淀'
                }
              ]
            }, {
              id: 9,
              label: '步骤1',
              children: [
                {
                  id: 9,
                  status: 3,
                  label: '毛细管电泳分离'
                },
                {
                  id: 9,
                  status: 1,
                  label: '激光器诱导识别'
                }]
            }]
          }]
        },
        {
          id: 1,
          label: '项目:🐎DNA检测',
          children: [{
            id: 4,
            label: '实验: 分离纯化DNA',
            children: [{
              id: 9,
              label: '步骤1',
              children: [
                {
                  id: 9,
                  status: 0,
                  label: '切胶纯化PCR模板'
                },
                {
                  id: 9,
                  status: 1,
                  label: '模板存储在超重水'
                }
              ]
            }, {
              id: 9,
              label: '步骤2',
              children: [
                {
                  id: 9,
                  status: 2,
                  label: '紫外光分度计定量'
                },
                {
                  id: 9,
                  status: 3,
                  label: '琼脂凝胶检测质量'
                }
              ]
            }]
          }, {
            id: 4,
            label: '实验: DNA序列检测',
            children: [{
              id: 9,
              label: '步骤1',
              children: [
                {
                  id: 9,
                  status: 2,
                  label: '去除ddNTP及盐分'
                },
                {
                  id: 9,
                  status: 4,
                  label: '96离心机乙醇沉淀'
                }
              ]
            }, {
              id: 9,
              label: '步骤1',
              children: [
                {
                  id: 9,
                  status: 3,
                  label: '毛细管电泳分离'
                },
                {
                  id: 9,
                  status: 1,
                  label: '激光器诱导识别'
                }]
            }]
          }]
        },
      ]
    }
  },

  methods: {
    toApplyResource(data) {
      this.$router.push({
        name: "applyRes",
        params: {
          data: data
        }
      })
    },

    toEnterLab(data) {
      this.$router.push({
        name: "enterLab",
        params: {
          data: data
        }
      })
    },

    toReturnResource(data) {
      this.$router.push({
        name: "returnRes",
        params: {
          data: data
        }
      })
    },

    toUpdateData(data) {
      this.$router.push({
        name: "updateData",
        params: {
          data: data
        }
      })
    },

  },
}
</script>

<style lang="scss">

.el-tree-node__content {
  background-color: #fff;
  height: 50px;
}

</style>